<div class="calendarHeader">
    <div class="row text-center">
        <div class="col-15">
            <a href="javascript:void(0)" ng-click="lastMonth()" class="lastMonth"><i class="icon ion-chevron-left"></i></a>
        </div>
        <div class="col-70">
            <span ng-bind="year.title" class="thisMonth"></span><span ng-bind="thisMonth.title" class="thisMonth"></span>
        </div>
        <div class="col-15">
            <a href="javascript:void(0)" ng-click="nextMonth()" class="nextMonth"><i class="icon ion-chevron-right"></i></a>
        </div>
    </div>
</div>

<table width="100%" border="0" class="datepicker">
    <tr>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
    </tr>
    <tr ng-repeat="d in list">
        <td ng-repeat="a in d" ng-bind="a.day"  ng-class="a.cssClass" ng-click="checkDate(a.day,$event)" ></td>
    </tr>
</table>
<style>
    .calendarHeader{
        background: #fff;
    }
    .datepicker{ font-size:14px; }
    .datepicker th{ font-weight:normal;padding:.4em 0; }
    .datepicker td{ text-align:center;height:20px;vertical-align:middle }

    .nextMonth,.lastMonth,.thisMonth{ font-size:18px;color:#333 }
    .calender_highlight{ color:red }

    .nextMonth, .lastMonth, .thisMonth {
        font-size: 12px;
        color: #333;
    }
    .col-15{
         width: 12%;
         display: inline-block;
         text-align: center;
     }
    .col-70{
        width: 70%;
        display: inline-block;
        text-align: center;
    }
    .ion-chevron-left{
        height: 19px;
        width: 15px;
        display: inline-block;
        background:url("them/images/ion-chevron-left.png")no-repeat ;
    }
    .ion-chevron-right{
        height: 19px;
        width: 15px;
        display: inline-block;
        background:url("them/images/ion-chevron-right.png")no-repeat ;
    }

    /*.icon :before {*/
        /*display: inline-block;*/
        /*font-family: "Ionicons";*/
        /*speak: none;*/
        /*font-style: normal;*/
        /*font-weight: normal;*/
        /*font-variant: normal;*/
        /*text-transform: none;*/
        /*text-rendering: auto;*/
        /*line-height: 1;*/
        /*-webkit-font-smoothing: antialiased;*/
        /*-moz-osx-font-smoothing: grayscale;*/
    /*}*/
    /*.icon:before {*/
        /*display: inline-block;*/
        /*font-family: "Ionicons";*/
        /*speak: none;*/
        /*font-style: normal;*/
        /*font-weight: normal;*/
        /*font-variant: normal;*/
        /*text-transform: none;*/
        /*text-rendering: auto;*/
        /*line-height: 1;*/
        /*-webkit-font-smoothing: antialiased;*/
        /*-moz-osx-font-smoothing: grayscale;*/
    /*}*/
    /*.ion-chevron-right:before {*/
        /*content: "\f125";*/
    /*}*/
    /*.ion-chevron-left:before {*/
        /*content: "\f124";*/
    /*}*/
</style>